<template>
  <section id="messagePage">
    <el-row style="line-height: 30px;padding-bottom: 10px;">
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap;padding: 0 3px'>消息类型：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>


      <el-col :span="8" style="text-align: left;padding-left: 10px">
        <el-button type="primary" size="mini" @click="getMessageData">查询</el-button>
        <!--<el-button type="primary" size="mini">已发</el-button>-->
        <!--<el-button type="primary" size="mini">发信息</el-button>-->
      </el-col>
    </el-row>
    <el-table ref="multipleTable" v-loading="loading" :data="tableData.list" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.createDate }}</template>
      </el-table-column>
      <el-table-column prop="titile" label="消息标题" width="120">
      </el-table-column>
      <el-table-column prop="content" label="消息内容" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-row style="padding: 10px;">
      <el-col :span="4">
        <el-button :disabled="multipleSelection.length == 0" type="primary">批量删除</el-button>
      </el-col>
      <el-col :span="20">
        <div class="block" style="text-align: right;padding-right: 20px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="tableData.pageNumber"
            :page-size="tableData.pageSize"
            layout="total, prev, pager, next"
            :total="tableData.totalRow">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </section>
</template>

<script>
  import judgeTime from '../../../../assets/js/index.js'

  export default {
    data () {
      return {
        params: [],
        options: [],
        value: '',
        tableData: [],
        multipleSelection: [],
        page: {
          pageSize: 10,
          pageNumber: 1
        },
        loading: false
      }
    },
    beforeMount () {
      this.getMessageData()
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      getMessageData: function () {
        this.loading = true
        this.$api.userMessage(this.page).then(res => {
          this.loading = false
          this.tableData = res.data
          this.params = this.tableData.list
//          this.tableData.list.forEach(item => {
//            if (item.status == 3){
//              this.params.push(item)
//            }
//          })
          for (let i = 0; i < this.params.length; i++) {
            this.params[i].createDate = judgeTime(this.params[i].createDate)
            let n = this.params[i].createDate
            if (n) {
              var reg = /((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])/
              let arr = n.match(reg)
              this.params[i].createDate = arr[0]
            }
          }
        })
      },
      handleCurrentChange (val) {
        this.page.pageNumber = val
        this.getMessageData()
      }
    }

  }
</script>

<style lang="less">
  #messagePage {

    .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 100%;
      padding-right: 0;
      font-size: 12px;
      padding-left: 20px;
    }
    .el-input {
      width: 100% !important;
    }
    .el-input__icon {
      line-height: inherit;
      width: 0;
    }
    .el-input__suffix {
      right: 20px;
    }

  }
</style>
